<template>
	<view>
		<view class="page-foot bgf">
			<view class="footbox">
				<view class="flex-box flex-between foot1">
					<view class="flex-box">
						<image :lazy-load="true" :src="broker_info.avatar" class="footavatar" mode="aspectFill"></image>
						<view>
							<view class="name">{{ broker_info.nickname?broker_info.nickname:'' }}</view>
							<view class="fs24 col89">服务<text class="colf8">{{ broker_info.service_num?broker_info.service_num:'' }}</text>人</view>
						</view>
					</view>
					<view class="flex-box">
						<button @tap.stop.prevent="addAppointLog" data-type="2" data-subtype="0" :data-uid="broker_info.id" class="btn1">留电咨询</button>
						<!-- <button @tap="jumpToChat" :data-uid="broker_info.id" class="btn2">立即微聊</button> -->
						<button open-type="contact" class="btn2">立即微聊</button>
					</view>
				</view>
			</view>
		</view>

		<view class="container">

			<view class="conavatar">
				<view class="meng"></view>
				<image :src="broker_info.avatar"  class="img_consultant" mode="aspectFill"></image>
				<image src="/static/icon/icon_avatardec.png" class="icon_avatardec"></image>
				<view class="flex-box flex-between databox">
					<view class="flex-grow-1">
						<view class="fs32 fwb">{{ broker_info.service_num?broker_info.service_num:'0' }} <text class="fs22">人</text></view>
						<view class="fs24">服务客户</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs32 fwb">{{ broker_info.take_look_num?broker_info.take_look_num:'0' }} <text class="fs22">次</text></view>
						<view class="fs24">勘察楼盘</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs32 fwb">{{ broker_info.satisfaction_degree?broker_info.satisfaction_degree:'0' }} <text class="fs22">%</text></view>
						<view class="fs24">满意度</view>
					</view>
				</view>

			</view>

			<view class="info">
				<view class="identifybox flex">
					<view class="leftitem flex-grow-1">
						<view class="name fwb">{{ broker_info.nickname?broker_info.nickname:'' }}</view>
						<view class="academic">毕业于{{ broker_info.college?broker_info.college:'' }}</view>
						<!-- <view class="flex-box targetbox" v-if="broker_info.tags_arr.length>0">
							<view class="target"v-for="(item1, index1) in broker_info.tags_arr"  >{{ item1 }}</view>
						</view> -->
					</view>
					<button @tap.stop.prevent="addAppointLog" data-type="2" data-subtype="0" :data-uid="broker_info.id" class="consulthim">向他咨询</button>
				</view>
				<view class="introducebox ">
					<view :class="(showmore ? '' : 'tripple-line') + ' intro'">{{ broker_info.bio?broker_info.bio:'' }}</view>
					<view class="tc" @click="showmore_fuc">
						<image src="/static/icon/icon_close-b.png" :class='["icon_close",showmore?"roate":""]'>
						</image>
					</view>
				</view>
			</view>

			<view class="qeuans">
				<view class="title fwb">买房问答({{ question_count }})</view>
				<template v-if="question_count > 0">
					<view class="quelist">
						<navigator
                            :url="'/pages/article/ask_detail/ask_detail?id=' + item.id" class="queitem" v-for="(item, index) in question_data">
							<view class="que fwb">{{ item.question }}</view>
							<view class="flex-box flex-between">
								<view class="fs24 col89">{{ item.user.nickname }}</view>
								<view class="fs24 col89">{{ item.createtime_text }}</view>
							</view>
							<view class="answer">
								<text :class="item.showall ? '' : 'm-ellipsis-l3'">{{ item.answer }}</text>
							</view>
						</navigator>
					</view>
					<navigator :url="'/pages/article/asklist/asklist?broker_user_id=' + broker_info.id"   class="showmore fwb">
						查看更多买房问答（{{ question_count }}）
					</navigator>
				</template>
				<template v-else>
					<u-empty
					        mode="data"
							text="没有买房问答数据"
							textSize="24"
					        icon="/static/images/none-data.png"
					>
					</u-empty>
				</template>
			</view>

			<view class="consult">
				<view class="title fwb">楼盘解读({{ borker_comment_count }})</view>
				<template v-if="borker_comment_count > 0">
					<view class="consultlist">
						<view class="consultitem" v-for="(item, index) in borker_comment_data">
							<view class="flex-box">
								<view class="flex-box flex-grow-1">
									<image :src="broker_info.avatar" class="consultimg" mode="aspectFill"></image>
									<view>
										<view class="name fwb">{{ broker_info.nickname }}</view>
										<view class="col89 fs24">累计服务客户<text class="colf8">{{ broker_info.service_num }}</text>人</view>
									</view>
								</view>
								<button @tap.stop.prevent="addAppointLog" data-type="2" data-subtype="0" :data-uid="broker_info.id" class="conshim">向他咨询</button>
							</view>
							<navigator :url="'/pages/house/building_detail/building_detail?id=' + item.house_id" class="target">#{{ item.house.name }}#</navigator>
							<view :class='[item.showall?"":"m-ellipsis-l3"]'>{{item.content}}</view>
							<view @tap="changeBrokerShowAll" :data-index="index" class="flex-box flex-between pt5">
								<view class="fs24 col89">{{ item.createtime_text }}</view>
								<view class="col009">{{ item.showall ? '收起' : '展开' }}全文</view>
							</view>
							<view class="df ac flexwa compicbox">
								<image
									@tap="previewImg"
									:data-url="item"
									:lazy-load="true"
									:src="item"
									alt=""
									class="compic"
									mode="aspectFill"
									v-for="(item, index1) in item.images_arr"
									 
								></image>
							</view>
						</view>
					</view>
					<navigator :url="'/pages/house/user_comments/user_comments?type=1&broker_user_id=' + broker_info.id + '&comment_type=2'"   class="showmore fwb">
						查看更多楼盘解读({{ borker_comment_count }})
					</navigator>
				</template>
				<template v-else>
					<u-empty
					        mode="data"
							text="没有楼盘解读数据"
							textSize="24"
					        icon="/static/images/none-data.png"
					>
					</u-empty>
				</template>
			</view>

			<view class="service">
				<view class="title fwb">服务介绍</view>
				<view class="servicelist">
					<u-parse :content="article"></u-parse>
				</view>
			</view>
		</view>
		
		
		<u-popup :show="popupStatus" mode="center" @close="closePopupStatus" closeable>
			<view class="pop">
				<view class="flex-box">
					<image :src="broker_info.avatar" class="consultimg" mode="aspectFill"></image>
					<view>
						<view class="fs30 pb10">{{ broker_info.nickname }}</view>
						<view class="col89 fs24">已为<text class="colf8">{{ broker_info.service_num }}</text>人解答过问题</view>
					</view>
				</view>
				<view class="pop-title2">
					<view class="m-ellipsis-l2">买房政策、买房政策、买房政策、房源信息、楼盘分析…有问题，他将在第一时间为您解答！</view>
				</view>
				<input type="number" placeholder="请输入手机号" @input="appoint_mobile" :value="appoint_mobile" class="pop-input" placeholder-class="colc" v-if="popupStatus" ></input>
				<button @tap="submitAppointLog" class="reserve-btn1">确认</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>
</template>

<script>
	const app = getApp();
	
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				popupStatus: false,
				
				//订阅咨询预约弹窗
				reserveStatus: false,
	
				//预约成功弹窗
				// 预约订阅类型
				appoint_type: 1,
	
				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,
	
				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',
	
				appoint_mobile_text: '',
				broker_user_id: 0,
				id: 0,
				showmore: false,
	
				//显示更多介绍
	// 			broker_info: {
	// 				avatar: '',
	// 				nickname: '',
	// 				service_num: '',
	// 				id: '',
	// 				college: '',
	// 				tags_arr: [],
	// 				bio: ''
	// 			},
				broker_info: {},
	
				question_data: [],
				question_count: 0,
				borker_comment_data: [],
				borker_comment_count: 0,
				isLoading: true,
	
				// 判断是否尚在加载中
				article: '',
	
				// 内容数据
				all_img_arr: [],
			};
		},
		onLoad: function (options) {
			this.id=options.id || 0
			this.initData();
		},
		onPullDownRefresh: function () {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
	
			var that = this; //模拟加载
	
			setTimeout(function () {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onShareAppMessage: function () {},
		methods: {
			//显示更多介绍
			showmore_fuc(e) {
				this.showmore=!this.showmore
			},

			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},
			changeBrokerShowAll(e) {
				var index = e.currentTarget.dataset.index;
				var borker_comment_data = this.borker_comment_data;
				borker_comment_data[index].showall = !borker_comment_data[index].showall;
				this.borker_comment_data= borker_comment_data
			},
			// 拨打电话
			bindPhoneCall(e) {
				var tel = app.globalData.config.platform_contact_tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				var that = this;
				functions.checkLogin(function (ret) {
					if (ret) {
						functions.jumpToChat(uid);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 添加预约记录
			addAppointLog(e) {
				this.appoint_type= e.currentTarget.dataset.type;
				this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
				this.broker_user_id= e.currentTarget.dataset.uid || 0; 
				// 处理手机号码
				this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus=true;
			},
			appoint_mobileFun(e) {
				this.appoint_mobile=e.detail.value
			},
			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
				  functions.toast('请输入正确的手机号');
				  return false;
				}
				functions.checkLogin(function (ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile=appoint_mobile;
			
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log',
							{
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								city: that.now_city,
							},
							function (res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' + appoint_mobile.substr(7);
								that.reserveStatus=true;
								that.popupStatus=false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			closePopupStatus() {
				this.popupStatus=false;
			},
			closeReserveStatus() {
				this.reserveStatus=false;
			},
			initData: function () {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/User/broker_detail',
					{
						id: this.id
					},
					function (res) {
						var all_img_arr=[];
						that.article=res.data.broker_sevice_introduce
						// res.data.borker_comment_data.forEach((element) => {
						res.data.user_comment_data.forEach((element) => {
							var images_arr = element.images_arr;
							images_arr.forEach((element2) => {
								all_img_arr.push(element2);
							});
						});
						that.all_img_arr=all_img_arr;
						that.broker_info=res.data.broker_info;
						console.log(that.broker_info)
						
						that.question_data=res.data.question_data;
						that.question_count=res.data.question_count;
						// that.borker_comment_data=res.data.borker_comment_data;
						that.borker_comment_data=res.data.user_comment_data;
						that.borker_comment_count=res.data.borker_comment_count
					}
				);
			}
		}
	}
</script>

<style lang="scss">
	
	.compicbox .compic {
	    width: calc((100% - 30rpx) / 3);
	    height: 200rpx;
	    margin-right: 15rpx;
	    margin-bottom: 15rpx;
	}
	.compicbox .compic:nth-of-type(3n) {
	    margin-right: 0;
	}
	.conavatar {
		width: 750rpx;
		height: 462rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 40rpx;
	}

	.meng {
		width: 750rpx;
		height: 462rpx;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.icon_avatardec {
		width: 750rpx;
		height: 70rpx;
		position: absolute;
		z-index: 4;
		bottom: 0;
		left: 0;
	}

	.img_consultant {
		width: 750rpx;
		height: 462rpx;
		position: relative;
		z-index: 1;
	}

	.databox {
		width: 400rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		color: #fff;
		z-index: 3;
	}

	.leftitem .name {
		font-size: 34rpx;
		padding-bottom: 13rpx;
	}

	.leftitem .academic {
		font-size: 24rpx;
		color: #898989;
		padding-bottom: 9rpx;
	}

	.leftitem .targetbox {
		width: 100%;
		padding-bottom: 30rpx;
	}

	.leftitem .targetbox .target {
		padding: 2rpx 7rpx;
		font-size: 22rpx;
		color: var(--blue);
		background: #E5F4FF;
		margin-right: 10rpx;
	}

	.identifybox .consulthim {
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: 28rpx;
		color: #fff;
		width: 175rpx;
		height: 65rpx;
		border-radius: 32.5rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		line-height: 65rpx;
	}

	.info {
		padding: 0 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.introducebox {
		border-radius: 15rpx;
		background: #f6f7fa;
		padding: 27rpx 34rpx 15rpx;
	}

	.introducebox .intro {
		line-height: 46rpx;
		color: #333;
	}

	.icon_close {
		width: 24rpx;
		height: 13rpx;
	}

	.icon_close.roate {
		transform: rotate(180deg);
	}


	.usercom {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.title {
		padding-bottom: 13rpx;
		font-size: 34rpx;
	}

	.useravatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.usercom .username {
		font-size: 30rpx;
		line-height: 40rpx;
		padding-bottom: 12rpx;
	}

	.usercom .satisify {
		font-size: 24rpx;
		color: #ccc;
		height: 26rpx;
		line-height: 36rpx;
		padding-left: 20rpx;
	}

	.usercom .comcontent {
		padding: 26rpx 0 20rpx;
		line-height: 39rpx;
		color: #333333;
	}

	.usercom .time {
		font-size: 24rpx;
		color: #898989;
	}

	.usercom .comitem {
		padding: 20rpx 0 28rpx;
		border-bottom: 1px solid #f4f3f3;
	}

	.combody .comitem:last-of-type {
		border: transparent;
	}


	.showmore {
		height: 100rpx;
		line-height: 100rpx;
		color: #898989;
		border-radius: 15rpx;
		background: #f6f7fa;
		text-align: center;
	}

	.example {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.exaitem {
		border-radius: 15rpx;
		background: #ffffff;
		box-shadow: 0px 4px 30rpx rgba(184, 189, 202, 0.3);
		overflow: hidden;
		margin-top: 20rpx;
	}

	.exaitem .needbox {
		padding: 30rpx 30rpx 40rpx;
		border-left: 6rpx solid var(--blue);
		border-bottom: 1px solid #f4f3f3;
	}

	.icon_need {
		width: 29rpx;
		height: 35rpx;
		margin-right: 18rpx;
	}

	.examplebody {
		padding-bottom: 60rpx;
	}

	.example .titlebox {
		padding-bottom: 30rpx;
	}

	.exaitem .recommendbox {
		border-left: 6rpx solid #FFB45C;
		padding: 32rpx 30rpx 39rpx;
	}

	.exaitem .titlebox .icon_rec {
		width: 35rpx;
		height: 35rpx;
		margin-right: 15rpx;
		margin-bottom: 5rpx;
	}

	.exaitem .icon_zan-g {
		width: 25rpx;
		height: 26rpx;
	}

	.reason {
		padding: 25rpx 0;
	}

	.reason .pr20 {
		height: 32rpx;
	}

	.houimg {
		width: 230rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.houimg image {
		width: 230rpx;
		height: 180rpx;
	}

	.housedinfo text {
		font-size: 24rpx;
		color: #898989;
	}

	.housedinfo text.colf8 {
		color: #f8532f;
	}

	.housedinfo text.fs34 {
		font-size: 34rpx;
	}

	.housedinfo text.pr20 {
		width: 120rpx;
	}

	.recitem {
		padding: 15rpx 0 15rpx;
		border-bottom: 1px solid #f4f3f3;
	}

	.recommendbox .titlebox {
		padding-bottom: 15rpx;
	}

	.reclist .recitem:last-of-type {
		border: transparent;
	}

	.pt5 {
		padding-top: 5rpx;
	}

	.qeuans {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.quelist .queitem {
		padding: 30rpx 0;
		border-bottom: 1px solid #f4f3f3;
	}

	.quelist .queitem:last-of-type {
		border: transparent;
	}

	.queitem .que {
		font-size: 32rpx;
		padding-bottom: 20rpx;
	}

	.queitem .answer {
		padding: 30rpx;
		border-radius: 15rpx;
		background-color: #f6f7fa;
		margin-top: 30rpx;
	}

	.consult {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.consultimg {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.consultitem {
		padding: 40rpx 0 40rpx;
	}

	.consultitem .conshim {
		width: 150rpx;
		height: 60rpx;
		border-radius: 8rpx;
		background: #E5F4FF;
		color: var(--blue);
		padding: 0;
		margin: 0;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 60rpx;
	}

	.consultitem .name {
		font-size: 34rpx;
		padding-bottom: 14rpx;
	}

	.consultitem .target {
		padding-top: 30rpx;
		color: var(--blue);
	}

	.consultlist .consultitem {
		border-bottom: 1px solid #f4f3f3;
	}



	.service {
		padding: 40rpx;
	}

	.serviceitem {
		padding-bottom: 42rpx;
		border-bottom: 1px solid #f4f3f3;
	}

	.serviceitem .servicetitle {
		font-size: 32rpx;
	}

	.serviceitem .skillname {
		position: relative;
		margin-right: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		display: inline;
	}

	.serviceitem .skillname::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 20rpx;
		background: #E5F4FF;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.serviceitem .skillname text {
		position: relative;
		z-index: 2;
		font-size: 30rpx;
	}

	.serviceitem .skillitem {
		padding-top: 24rpx;
	}

	.serviceitem .skillitem .flex-grow-1 {
		line-height: 40rpx;
	}

	.servicelist .serviceitem:last-of-type {
		border: transparent;
		padding-top: 30rpx;
	}

	.progress {
		width: 687rpx;
		height: 441rpx;
		margin-top: 20rpx;
	}


	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: 32rpx;
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}


	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}

	.pop {
		width: 600rpx;
		padding: 30rpx 40rpx;
		background-color: #fff;
	}

	.pop .pop-title2 {
		padding: 56rpx 0 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #898989;
		line-height: 42rpx;
	}

	.pop .pop-input {
		height: 90rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		font-size: 30rpx;
	}

</style>
